<template>

  <div>
    <el-header
        style=" display: flex;
        align-items: center;
        width: 100%;
        height:10vh;
        background-color: #bdc3c7;
        "
      >

      <img src="../../assets/images/logos/logo.png" alt="Logo" title="Logo">
      <el-menu
      unique-opened router
      mode="horizontal"
      :ellipsis="true"
      style="
      width: 70%;
      margin: 5px auto 0;
      border-radius: 50px;
      overflow: hidden;
        "


      >

        <el-sub-menu index="1">
          <template #title><h2>首页</h2></template>
          <el-menu-item index="/home">首页</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title><h2>旅游景点</h2></template>
          <el-menu-item index="/tourlist">景点列表</el-menu-item>
          <el-menu-item index="tour-grid">酒店列表</el-menu-item>
<!--          <el-menu-item index="tour-sidebar">Tour Sidebar</el-menu-item>-->
<!--          <el-menu-item index="tour-details">Tour Details</el-menu-item>-->
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title><h2>目的地</h2></template>
          <el-menu-item index="destination-01">Destination 01</el-menu-item>
          <el-menu-item index="destination-details">Destination Details</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title><h2>主题</h2></template>
          <el-menu-item index="pricing">Pricing</el-menu-item>
          <el-menu-item index="faqs">FAQs</el-menu-item>
          <el-menu-item index="gallery-grid">Gallery Grid</el-menu-item>
          <el-menu-item index="gallery-slider">Gallery Slider</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="5">
          <template #title><h2>论坛</h2></template>
          <el-menu-item index="blog-list">热点话题</el-menu-item>
          <el-menu-item index="/comment">评论区</el-menu-item>
        </el-sub-menu>

      </el-menu>


      <div class="header-right" style="align-item: right; margin-right: 20px;">
        <el-button link icon="el-icon-menu" v-if="isloginValue" @click="Gologin" >登录</el-button>
        <el-button link  v-else @click="router.push('/userinfo')">用户名</el-button>
        <el-button link  v-if="!isloginValue" @click="logout" >退出</el-button>
      </div>

    </el-header>



    <!-- Hero Section -->
    <el-main>
      <router-view/>
    </el-main>

    <!-- Footer -->
    <el-footer class="footer" style="background-color: #2c3e50; color: white; text-align: center; padding: 20px 0; position: relative; bottom: 0; width: 100%;">
      <p class="copyright" style="font-size: 14px; margin: 0; color: #bdc3c7;">@Copy 2024 bootstrapMB, All rights reserved</p>
    </el-footer>
  </div>
</template>

<script setup>


import router from "@/router";
import {ref} from "vue";
const isloginValue = ref(false);



const Gologin=()=> {
  router.push('/login');
  isloginValue.value=!isloginValue.value;
}
const logout=()=> {

  isloginValue.value=!isloginValue.value;
  router.push('/')
}
</script>

<style scoped>
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
  display: flex;
  justify-content: center;
}

</style>










